// 导入ESLint插件
const ESLintPlugin = require("eslint-webpack-plugin");
// 引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//暴露一个对象
module.exports = {
  //入口
  entry: "./src/js/main.js",
  //出口
  output: {
    path: __dirname + "/build", //输出的文件夹  这里要求必须是一个绝对路径
    filename: "js/bundle.js", //输出的文件名
    clean: true, //每次输出结果, 都会自动删除旧的打包资源
    // 设置引入打包文件的基础路径，默认是相对路径
    publicPath: '/' // 绝对路径
  },
  //模式  开发模式
  mode: "development",
  //配置loader
  module: {
    //规则
    rules: [
      {
        test: /\.css$/, //test 测试 检测
        use: [
          //顺序是不能变化的, 处理顺序是由下至上
          "style-loader", // style-loader 将 css 内容创建成为 style 标签插入到文档中
          "css-loader", // css-loader 将 css 文件转为 commonJS 模块
        ],
      },
      {
        test: /\.less$/, //test 测试 检测
        use: [
          //顺序是不能变化的, 处理顺序是由下至上
          "style-loader", // style-loader 将 css 内容创建成为 style 标签插入到文档中
          "css-loader", // css-loader 将 css 文件转为 commonJS 模块
          "less-loader", // less-loader 将 less 转为 css
        ],
      },
      //
      {
        test: /\.js$/,
        exclude: /node_modules/, //排除
        use: {
          loader: "babel-loader",
          options: {
            //额外的选项
            presets: [
              [
                "@babel/preset-env",
                {
                  useBuiltIns: "usage", // 只打包使用的ES6新API的实现代码
                  corejs: { version: 2 }, // 指定core-js的版本号为2
                },
              ],
            ],
          },
        },
      },
      // 处理图片
      {
        test: /\.(jpg|png|gif)$/,
        type: "asset", //asset 资产
        // 解析器
        parser: {
          // 指定进行图片base64编码最大文件大小
          dataUrlCondition: {
            maxSize: 5 * 1024, // 5kb    默认8k
          },
        },
        // 打包生成的文件  生成器
        generator: {
          filename: "images/[hash:8][ext]",
        },
      },
      // 配置 html 的 loader
      {
        test: /\.(html)$/,
        use: {
          loader: "html-loader",
        },
      },
      //配置字体文件
      {
        test: /\.(eot|svg|woff|woff2|ttf)$/,
        type: "asset",
        // 解析器
        parser: {
          // 指定进行base64编码最大文件大小
          dataUrlCondition: {
            maxSize: 5 * 1024, // 5kb
          },
        },
        generator: {
          filename: "fonts/[hash:8][ext]",
        },
      },
    ],
  },
  //配置插件
  plugins: [
    new ESLintPlugin(),
    // 配置打包HTML的插件
    new HtmlWebpackPlugin({
      template: "./public/index.html", // 指定html模板文件。
      inject: "body", // 将打包生成的JS文件放置在body尾部
      hash: true, // 在引入JS时增加hash后缀字符串,去除缓存。
      minify: {
        removeAttributeQuotes: false, // 移除属性中的双引号
        removeComments: true, // 移除注释
        collapseWhitespace: true, // 去除空格与换行
      },
    }),
  ],

  // 配置开发服务
  devServer: {
    port: 3000, // 设置端口号
    open: true, // 自动在浏览器中打开页面
  },

  //配置 devtool 定位错误位置
  devtool: 'cheap-module-source-map',
  //生产模式下不需要配置 devtool
  
};
